<template>
  <div id="index_divination">
    <transition name="fade">
      <Home v-if="show.home" msg="Welcome to Your Vue.js App" />
    </transition>
    <transition name="fade">
      <Detail v-if="show.detail" msg="Welcome to Your Vue.js App" />
    </transition>
  </div>
</template>

<script>
import Detail from './Detail.vue'
import Home from './Home.vue'
export default {
  name: 'App',
  components: {
    Detail,
    Home,
  },
  data: function() {
    return {
      show: {
        home: false,
        detail: false,
      },
    }
  },

  created: function() {
    setTimeout(
      function() {
        this.handleShow('home', true)
      }.bind(this),
      10
    )
  },

  methods: {
    /**
     * HandleShow
     * 操作-动态展示组件
     *
     * @param string  home  组件名
     * @param boolean flag  标志位
     *
     * @return null
     */
    handleShow: function(comp = 'home', flag = true) {
      switch (comp) {
        case 'home':
          this.show.home = flag
          break
        case 'detail':
          this.show.detail = flag
          break
        default:
      }
    },
  },
}
</script>

<style>
/* 效果类 */

/* 渐入渐出 */
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 3s;
}

/* 主节点 */
#index_divination {
  width: 100%;
  height: 100%;
}
</style>
